<!--
 * @Author: alenjzhang
 * @Date: 2024-03-20 20:56:30
 * @Description: 基本信息
-->
<script setup lang="ts">
import Upload from '@/components/avatar-upload/index.vue';
import { INPUT_PLACEHOLDER, SELECT_PLACEHOLDER, SEX_ENUM, type StaffFormProps, dateFormat } from '@/const';
import { toRefs } from 'vue';

const props = defineProps<StaffFormProps>()

const { readonly, formState } = toRefs(props);

</script>

<template>
	<a-form-item class="fullWidth" v-if="props.add" label="头像">
		<Upload v-model:value="formState.avatar"></Upload>
	</a-form-item>
	<a-form-item label="姓名" class="thirtyPercentWidth" name="name">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.name"></a-input>
		<span v-else>{{ formState.name }}</span>
	</a-form-item>
	<a-form-item label="身份证号" class="thirtyPercentWidth" name="idcard">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.idcard"></a-input>
		<span v-else>{{ formState.idcard }}</span>
	</a-form-item>
	<a-form-item label="性别" class="thirtyPercentWidth" name="sex">
		<a-radio-group v-if="!readonly" :options="SEX_ENUM.options" v-model:value="formState.sex"></a-radio-group>
		<span v-else>{{ SEX_ENUM.map[formState.sex] }}</span>
	</a-form-item>
	<a-form-item label="家庭住址" class="thirtyPercentWidth" name="address">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.address"></a-input>
		<span v-else>{{ formState.address }}</span>
	</a-form-item>
	<a-form-item label="出生年月" class="thirtyPercentWidth" name="birthday">
		<a-date-picker v-if="!readonly" class="fullWidth" :valueFormat="dateFormat"
			:placeholder="SELECT_PLACEHOLDER" v-model:value="formState.birthday">
		</a-date-picker>
		<span v-else>{{ formState.birthday }}</span>
	</a-form-item>
	<a-form-item label="紧急联系人" class="thirtyPercentWidth" name="contact">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.contact"></a-input>
		<span v-else>{{ formState.contact }}</span>
	</a-form-item>
	<a-form-item label="年龄" class="thirtyPercentWidth" name="age">
		<a-input v-if="!readonly" placeholder="根据出生年月自动计算" disabled v-model:value="formState.age"></a-input>
		<span v-else>{{ formState.age }}</span>
	</a-form-item>
	<a-form-item label="联系人电话" class="thirtyPercentWidth" name="contactPhone">
		<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.contactPhone"></a-input>
		<span v-else>{{ formState.contactPhone }}</span>
	</a-form-item>
</template>
